import React, { useState, useEffect } from 'react'
import { DatePicker, Form, Space, Button, Cascader, Select } from 'antd'
import { DownloadOutlined, SearchOutlined } from '@ant-design/icons'
import { FilterContainer } from '@/appComponents/Filter'
import dayjs from 'dayjs'

const dateFormat = 'YYYY-MM-DD'
const Filter = ({ onQuery, paramsData, setParamsData }) => {
  const onQueryChange = (v, t) => {
    setParamsData((state) => {
      state[t] = dayjs(v).format(dateFormat)
      return {
        ...state
      }
    })
  }

  const click = () => {
    let newParamsData = {}
    for (let key in paramsData) {
      if (paramsData[key] != (-1 || '-1')) {
        newParamsData[key] = paramsData[key]
      }
    }
    onQuery && onQuery(newParamsData)
  }

  const industry_options = [
    {
      value: '行业1',
      label: '行业1',
      children: [
        {
          value: '行业11',
          label: '行业11',
          children: [
            {
              value: '行业111',
              label: '行业111'
            }
          ]
        }
      ]
    },
    {
      value: '行业2',
      label: '行业2',
      children: [
        {
          value: '行业22',
          label: '行业22',
          children: [
            {
              value: '行业222',
              label: '行业222'
            }
          ]
        }
      ]
    }
  ]

  const method_options = [
    {
      value: '预案1',
      label: '预案1'
    },
    {
      value: '预案2',
      label: '预案2'
    },
    {
      value: '预案3',
      label: '预案3'
    }
  ]

  return (
    <FilterContainer>
      <Form name="horizontal_login" layout="inline">
        <Form.Item label="时间：">
          <DatePicker
            showToday
            defaultValue={dayjs(paramsData.clue_date)}
            format={dateFormat}
            onChange={(v) => {
              onQueryChange(v, 'clue_date')
            }}
          />
        </Form.Item>
        <Form.Item>
          <Cascader options={industry_options} placeholder="选择行业" />
        </Form.Item>
        <Form.Item>
          <Select
            style={{
              width: 120
            }}
            options={method_options}
            placeholder="选择预案"
          />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button
              type="primary"
              onClick={() => click('query')}
              icon={<SearchOutlined></SearchOutlined>}
            >
              查询
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </FilterContainer>
  )
}

export default Filter
